<template>
    <div class="page">
        <div class="content" id="area" ref="main"></div>
        <button class="btn" @click="back">返回上一层</button>
    </div>
</template>
<script>
import getCityName from '../../public/getMapName'
// console.log(getCityName);
export default {
    data() {
        return {
            myEcharts: null
        }
    },
    methods: {
        // 检测屏幕
        screen() {
            this.myEcharts.resize();
            let width = this.$refs.main.offsetWidth;
            let num = (width / 100) * 5;
            let subnum = (width / 100) * 4;
            let options = {
                title: {
                    textStyle: {
                        fontSize: num
                    },
                    subtextStyle: {
                        fontSize: subnum
                    }
                }
            }
            this.myEcharts.setOption(options)
        },
        // 初始化
        async initEcharts() {
            let main = this.$refs.main;
            this.myEcharts = this.$echarts.init(main,this.themeStatus);
            // 请求本地的地图接口
            let mapData = await this.$axios('http://localhost:8080/map/china.json');
            // 注册可用的地图
            this.$echarts.registerMap('china', mapData.data);
            console.log(mapData);
            let coverData = await this.$axios('/CropCoverage');
            // console.log(coverData);
            let options = {
                title: {
                    text: '各地区农作物覆盖面积',
                    subtext: coverData.data.MainPlants + '万亩'
                },
                tooltip: {//弹框
                    show: true
                },
                visualMap: {//视觉映射
                    show: true,
                    calculable: true,//是否显示拖动手柄
                    max: 400,//最大值
                    min: 0,//最小值
                    color: ['#0F3357', '#36BFE5']

                },
                series: [{
                    type: 'map',
                    map: 'china',
                    data: coverData.data.content,
                    // label:{
                    //     show:true
                    // }
                    left: '20%',
                    right: '20%',
                    top: '10%',
                    bottom: '10%'


                }]
            }
            this.myEcharts.setOption(options)
            // 给地图添加点击事件  
            this.myEcharts.on('click', async (city) => {
                // console.log(city.name);
                // 获取到城市的拼音
                let cityName = getCityName(city.name)
                console.log(cityName);
                // 如果有名字  才会重新绘制地图
                if (cityName.name) {
                    let dataList = await this.$axios('http://localhost:8080' + cityName.path)
                    console.log(dataList);
                    // 注册可用的地图
                    this.$echarts.registerMap(cityName.name, dataList.data);
                    // 重新绘制地图
                    let options = {
                        series: [
                            {
                                type: 'map',
                                map: cityName.name
                            }
                        ]
                    }
                    this.myEcharts.setOption(options)
                }

            })
            
        },
        // 返回
        back(){
            // 返回上一层 不保存
            let options = {
                series:[
                    {
                        map:'china'
                    }
                ]
            }
            this.myEcharts.setOption(options)
            // 重新绘制地图  保存上一次点击的记录
            // this.initEcharts();
        }
       

    },
    mounted() {
        this.initEcharts();
        window.addEventListener('resize', this.screen)
        // this.getData()
        this.screen()
    },
    watch: {
        // 监听切换主题
        themeStatus(){
            // 销毁之前的实例
            this.myEcharts.dispose();
            this.initEcharts();
            // this.getData()
            this.screen();
        }
    },
    computed: {
        themeStatus(){
            return this.$store.state.theme
        }
    },
    filters: {},
    components: {},
}
</script>
<style scoped>
    .page{
        position: relative;
    }
    .btn{
        position: absolute;
        right: 10%;
        top: 10%;
    }
</style>